<template>
	<!-- 分页 -->
	<div class="pagination clear">
		<el-pagination :class="`pagination--${position}`" :total="total" :current-page.sync="currentPage"
			:page-size.sync="pageSizeNum" :page-sizes="pageSizes" :layout="layout" :background="background"
			@size-change="handlePageSizeChange" @current-change="handlePageNumberChange">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		props: {
			total: {
				required: true,
				type: Number,
			},
			pageNumber: {
				type: Number,
				default: 1,
			},
			pageSize: {
				type: Number,
				default: 10,
			},
			pageSizes: {
				type: Array,
				default () {
					return [5, 10, 20, 30, 50, 100, 200, 300, 500, 800, 1000];
				},
			},
			layout: {
				type: String,
				default: "total, sizes, prev, pager, next, jumper",
			},
			background: {
				type: Boolean,
				default: true,
			},
			position: {
				validator: function(value) {
					return ["left", "center", "right"].includes(value);
				},
				default: "right",
			},
		},
		computed: {
			themeColor() {
				return this.$store.state.settings.themeColor;
			},
			currentPage: {
				get() {
					return this.pageNumber;
				},
				set(val) {
					this.$emit("update:pageNumber", val);
				},
			},
			pageSizeNum: {
				get() {
					return this.pageSize;
				},
				set(val) {
					this.$emit("update:pageSize", val);
				},
			},
		},
		watch: {
			themeColor(newValue) {
				this.updateCSSVariable('--theme-color', newValue);
			}
		},
		mounted() {
			this.updateCSSVariable('--theme-color', this.themeColor);
		},
		methods: {
			updateCSSVariable(varName, value) {
				document.documentElement.style.setProperty(varName, value);
			},
			handlePageSizeChange(val) {
				this.$emit("pagination", val);
			},
			handlePageNumberChange(val) {
				this.$emit("pagination", val);
			},
		},
	};
</script>

<style lang="scss">
	@import "@/styles/variables.scss";
	.pagination {
		padding: 24px 0 !important;

		&--left {
			float: left;
		}

		&--center {
			text-align: center;
		}

		&--right {
			float: right;
		}
		.el-pagination{
			padding:2px 5px !important;
		}
		.el-pagination .el-pager {
			.number {
				font-weight: normal;
				color:$mainTextColor;
			}

			.el-icon-more {
				border: none !important;
			}
		}

		.el-pagination.is-background .btn-prev,
		.el-pagination.is-background .btn-next,
		.el-pagination.is-background .el-pager li {
			background-color: $primaryColor;
			border: 1px solid $primaryColor;
			color: $mainTextColor;
			border-radius: 4px;
		}

		.el-pagination.is-background .el-pager li:not(.disabled).active {
			border-color:$primaryColor !important;
			background-color:$primaryColor !important;
			color: $mainTextColor;
		}
		.el-pagination__total{
			color: $mainTextColor;
			padding:0 5px !important;
		}
		.el-pagination__jump{
			color: $mainTextColor;
			.el-pagination__editor.el-input{
				margin: 0 5px !important;
			}
		}
		
	}
	.el-select-dropdown{
		border:1px solid $primaryColor !important;
	}
	.el-select-dropdown__item.selected{
		background-color:$primaryColor !important;
		color: $mainTextColor;
	}
</style>